<template>
  <div>
    <van-tabs v-model="active" type="false" class="selectTab">
      <van-tab>
        <router-link to="/home/found" class="link">
          <van-nav-bar left-arrow />
        </router-link>
        <router-view />
      </van-tab>
      <van-tab title="目标日" to="/home/found/target">
        <router-view />
      </van-tab>
      <van-tab to="/home/found/add">
        <template #title>
          <van-icon name="add-o" size="20" />
        </template>
        <router-view />
      </van-tab>
    </van-tabs>
    <!-- 目标日添加 -->
    <div class="table">
      <!-- 弹出层 -->
      <van-popup v-model="show" class="form">
        <div class="text">
          <van-tabs v-model="active" type="false" class="selectTab">
            <van-tab title="取消" to="/home/found/target">
              <router-view />
            </van-tab>
            <van-tab></van-tab>
            <van-tab title="添加">
              <router-view />
            </van-tab>
            <van-tab title="">
              <router-view />
            </van-tab>
          </van-tabs>
        </div>
        <!-- 具体内容 -->
        <div class="content">
          <div class="van">
            <van-icon name="edit" size="20" />
            <input type="text" placeholder="点这里输入内容" />
          </div>
          <div>
            <van-icon name="notes-o" size="20" class="van" />
            <span>目标日</span>
            <button class="rigth">公历</button>
          </div>
          <div>
            <van-icon name="underway-o" size="20" class="van" />
            <span>开启循环</span>
            <van-switch
              v-model="checked"
              active-color="#808080"
              class="rigth"
            />
          </div>
          <div>
            <van-icon name="back-top" size="20" class="van" />
            <span>置顶</span>
            <van-switch
              v-model="checked"
              active-color="#808080"
              class="rigth"
            />
          </div>
          <div>
            <van-icon name="bulb-o" size="20" class="van" />
            <span>提醒</span>
            <span class="rigth">2022年0608 提醒</span>
          </div>
          <div>
            <van-icon name="edit" size="20" class="van" />
            <input type="text" placeholder="写给自己的话" />
            <button class="rigth">换一句</button>
          </div>
          <router-link to="/home/found/clock"
            ><van-button type="default" class="btn"
              >保存</van-button
            ></router-link
          >
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      active: 0,
      checked: true,
      show: true,
    };
  },
  methods: {},
};
</script>

<style scoped>
.selectTab {
  width: 750px;
  height: 48px;
  margin-top: 61px;
}
.link {
  margin: -35px 0 0 -300px;
  position: absolute;
}

.form {
  width: 750px;
  height: 600px;
  margin-top: 180px;
  border-radius: 50px 50px 0px 0px;
}
.table {
  width: 750px;
  height: 600px;
  margin: 0 auto;
  margin-top: 586px;
  border-style: none;
  border-color: unset;
  border-radius: 30px 30px 0px 0px;
  font-size: 14px;
  padding: 0px;
  text-align: center;
  line-height: 20px;
  font-weight: normal;
  font-style: normal;
  border-top: 1px solid black;
}
.text {
  margin: 30px 0 30px 0;
}
.content {
  margin: 10px;
  text-align: left;
}
.content div {
  margin-bottom: 30px;
  border-bottom: 1px solid grey;
  color: black;
}

.van {
  margin: 0 20px 0 20px;
}
.rigth {
  float: right;
}
input {
  width: 200px;
  border: 1px solid #fff;
}
.btn {
  margin-left: 310px;
  width: 120px;
  height: 50px;
}
</style>
